<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>智能化运维系统</title>

  <!-- Bootstrap -->
  <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- NProgress -->
  <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
  <!-- bootstrap-daterangepicker -->
  <link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

  <!-- Custom Theme Style -->
  <link href="../build/css/custom.min.css" rel="stylesheet">

  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="layui/layui.js"></script>
  <style>
    .d-box {
      box-shadow: 4px 4px 16px #757575;
      border-radius: 4px;
      background: #fff;
      margin-top: 30px;
      height: 200px;
      width: 90%;
    }

    .d-text {
      margin-left: 0px;
      border: 1px solid #adadad;
      border-radius: 4px;
      width: 97%;
      margin: 0 auto;
      margin-top: 10px;
    }
  </style>

</head>

<body class="nav-md">
  <div class="container body">
    <div class="main_container">
      <div class="col-md-3 left_col">
        <div class="left_col scroll-view">
          <div class="navbar nav_title" style="border: 0;">
            <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Smart System</span></a>
          </div>

          <div class="clearfix"></div>

          <!-- menu profile quick info -->
          <div class="profile clearfix">
            <div class="profile_pic">
              <img src="images/istio.png" alt="..." class="img-circle profile_img">
            </div>
            <div class="profile_info">
              <span>Welcome</span>
              <h2></h2>
            </div>
          </div>
          <!-- /menu profile quick info -->

          <br />

          <!-- sidebar menu -->
          <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
              <h3>智能化运行分析和自适应系统</h3>
              <ul class="nav side-menu">
                <li><a><i class="fa fa-home"></i> 监控界面 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">

                    <li><a href="layermodel.html">分层监控</a></li>
                    <li><a href="dataUI.html">指标数据</a></li>
                    
                  </ul>
                </li>
                <li><a><i class="fa fa-edit"></i> 自适应调整 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="strategy.html">策略部署</a></li>

                  </ul>
                </li>
                <li><a><i class="fa fa-desktop"></i> 风险分析告警 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="alert.html">风险告警及指标追踪</a></li>

                  </ul>
                </li>

                <li><a><i class="fa fa-table"></i> 指标阈值设置 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="tasklayer.html">任务层</a></li>
                    <li><a href="servicelayer.html">微服务层</a></li>
                    <li><a href="nodelayer.html">结点层</a></li>
                  </ul>
                </li>


              
              </ul>
            </div>

          
          </div>

            <!--
              <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                  <li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="e_commerce.html">E-commerce</a></li>
                      <li><a href="projects.html">Projects</a></li>
                      <li><a href="project_detail.html">Project Detail</a></li>
                      <li><a href="contacts.html">Contacts</a></li>
                      <li><a href="profile.html">Profile</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="page_403.html">403 Error</a></li>
                      <li><a href="page_404.html">404 Error</a></li>
                      <li><a href="page_500.html">500 Error</a></li>
                      <li><a href="plain_page.html">Plain Page</a></li>
                      <li><a href="login.html">Login Page</a></li>
                      <li><a href="pricing_tables.html">Pricing Tables</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                        <li><a href="#level1_1">Level One</a>
                        </li>
                        <li><a>Level One<span class="fa fa-chevron-down"></span></a>
                          <ul class="nav child_menu">
                            <li class="sub_menu"><a href="level2.html">Level Two</a>
                            </li>
                            <li><a href="#level2_1">Level Two</a>
                            </li>
                            <li><a href="#level2_2">Level Two</a>
                            </li>
                          </ul>
                        </li>
                        <li><a href="#level1_2">Level One</a>
                        </li>
                    </ul>
                  </li>                  
                  <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
                </ul>
              </div>
            -->
          </div>
          <!-- /sidebar menu -->

          <!-- /menu footer buttons -->
          <!--
            <div class="sidebar-footer hidden-small">
              <a data-toggle="tooltip" data-placement="top" title="Settings">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="FullScreen">
                <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="Lock">
                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
              </a>
            </div>
          -->
          <!-- /menu footer buttons -->
        </div>
      </div>

      <!-- top navigation -->

      <div class="top_nav">
        <div class="nav_menu">
          <div class="nav toggle">
            <a id="menu_toggle"><i class="fa fa-bars"></i></a>
          </div>
          <!--
                <nav class="nav navbar-nav">
                <ul class=" navbar-right">
                  <li class="nav-item dropdown open" style="padding-left: 15px;">
                    <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
                      <img src="images/img.jpg" alt="">John Doe
                    </a>
                    <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item"  href="javascript:;"> Profile</a>
                        <a class="dropdown-item"  href="javascript:;">
                          <span class="badge bg-red pull-right">50%</span>
                          <span>Settings</span>
                        </a>
                    <a class="dropdown-item"  href="javascript:;">Help</a>
                      <a class="dropdown-item"  href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a>
                    </div>
                  </li>
  
                  <li role="presentation" class="nav-item dropdown open">
                    <a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-toggle="dropdown" aria-expanded="false">
                      <i class="fa fa-envelope-o"></i>
                      <span class="badge bg-green">6</span>
                    </a>
                    <ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <div class="text-center">
                          <a class="dropdown-item">
                            <strong>See All Alerts</strong>
                            <i class="fa fa-angle-right"></i>
                          </a>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </nav>
              -->
        </div>
      </div>

      <!-- /top navigation -->

      <!-- page content -->
      <div class="right_col" role="main">
        <div class="">
          <div class="page-title">
            <div class="title_left">
              <h3>指标数据阈值设置 <small> 集群节点层 </small></h3>
            </div>
          </div>

          <div class="clearfix"></div>

          <form class="layui-form" action="" style="margin: 60px 60px;">
            <div class="layui-row">

              <div class="layui-col-md6">
                <div class="d-box">
                  <div style="padding-top: 10px;">
                    <h2 style="margin-left: 25px;">
                      <i class="layui-icon layui-icon-tips" style="font-size: 20px; color: #1E9FFF;"></i>
                      最大CPU利用率
                    </h2>
                  </div>

                  <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block d-text">
                      <textarea name="" placeholder="请设置阈值" class="layui-textarea"
                        style="height: 30px;border-radius:4px;"></textarea>
                    </div>
                  </div>
                </div>
              </div>

              <div class="layui-col-md6">
                <div class="d-box">
                  <div style="padding-top: 10px;">
                    <h2 style="margin-left: 25px;">
                      <i class="layui-icon layui-icon-tips" style="font-size: 20px; color: #1E9FFF;"></i>
                      最大内存使用率
                    </h2>
                  </div>

                  <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block d-text">
                      <textarea name="" placeholder="请设置阈值" class="layui-textarea"
                        style="height: 30px;border-radius:4px;"></textarea>
                    </div>
                  </div>
                </div>
              </div>

            </div>

            <div class="layui-row">
              <div class="layui-col-md6">
                <div class="d-box">
                  <div style="padding-top: 10px;">
                    <h2 style="margin-left: 25px;">
                      <i class="layui-icon layui-icon-tips" style="font-size: 20px; color: #1E9FFF;"></i>
                      最大硬盘使用率
                    </h2>
                  </div>

                  <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block d-text">
                      <textarea name="" placeholder="请设置阈值" class="layui-textarea"
                        style="height: 30px;border-radius:4px;"></textarea>
                    </div>
                  </div>

                </div>
              </div>

              <div class="layui-col-md6">
                <div class="d-box">
                  <div style="padding-top: 10px;">
                    <h2 style="margin-left: 25px;">
                      <i class="layui-icon layui-icon-tips" style="font-size: 20px; color: #1E9FFF;"></i>
                      最大硬盘IOPS
                    </h2>
                  </div>

                  <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block d-text">
                      <textarea name="" placeholder="请设置阈值" class="layui-textarea"
                        style="height: 30px;border-radius:4px;"></textarea>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="layui-row">
              <div class="layui-col-md6">
                <div class="d-box">
                  <div style="padding-top: 10px;">
                    <h2 style="margin-left: 25px;">
                      <i class="layui-icon layui-icon-tips" style="font-size: 20px; color: #1E9FFF;"></i>
                      最大网络传输率
                    </h2>
                  </div>

                  <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block d-text">
                      <textarea name="" placeholder="请设置阈值" class="layui-textarea"
                        style="height: 30px;border-radius:4px;"></textarea>
                    </div>
                  </div>

                </div>
              </div>

              <div class="layui-col-md6">
                <div class="d-box">
                  <div style="padding-top: 10px;">
                    <h2 style="margin-left: 25px;">
                      <i class="layui-icon layui-icon-tips" style="font-size: 20px; color: #1E9FFF;"></i>
                      最小QoS
                    </h2>
                  </div>

                  <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block d-text">
                      <textarea name="" placeholder="请设置阈值" class="layui-textarea"
                        style="height: 30px;border-radius:4px;"></textarea>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </form>

          <div style="width:100%;height: 30px;margin-top: -20px;">
            <button type="button" class="layui-btn layui-btn-lg"
              style="width:130px;margin-right:120px;margin-top:-10px;margin-bottom: 40px;float:right">确 认</button>
          </div>


          <script>
            layui.use('form', function () {
              var form = layui.form;
              form.render();
            });

          </script>
        </div>
        <div class="clearfix"></div>
        <br />
      </div>
    </div>
    <!-- /page content -->

    <!-- footer content -->
    <footer>
      <div class="pull-right">
        <a href="https://colorlib.com"></a>
      </div>
      <div class="clearfix"></div>
    </footer>
    <!-- /footer content -->
  </div>
  </div>

  <!-- jQuery -->
  <script src="../vendors/jquery/dist/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="../vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <!-- FastClick -->
  <script src="../vendors/fastclick/lib/fastclick.js"></script>
  <!-- NProgress -->
  <script src="../vendors/nprogress/nprogress.js"></script>
  <!-- Chart.js -->
  <script src="../vendors/Chart.js/dist/Chart.min.js"></script>
  <!-- jQuery Sparklines -->
  <script src="../vendors/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
  <!-- Flot -->
  <script src="../vendors/Flot/jquery.flot.js"></script>
  <script src="../vendors/Flot/jquery.flot.pie.js"></script>
  <script src="../vendors/Flot/jquery.flot.time.js"></script>
  <script src="../vendors/Flot/jquery.flot.stack.js"></script>
  <script src="../vendors/Flot/jquery.flot.resize.js"></script>
  <!-- Flot plugins -->
  <script src="../vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
  <script src="../vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
  <script src="../vendors/flot.curvedlines/curvedLines.js"></script>
  <!-- DateJS -->
  <script src="../vendors/DateJS/build/date.js"></script>
  <!-- bootstrap-daterangepicker -->
  <script src="../vendors/moment/min/moment.min.js"></script>
  <script src="../vendors/bootstrap-daterangepicker/daterangepicker.js"></script>

  <!-- Custom Theme Scripts -->
  <script src="../build/js/custom.min.js"></script>

  <script>
    $(document).ready(function () {
      var ele = document.getElementById("line");
      var graph = new Chart(ele, {
        type: 'line',
        data: {
          labels: ["19：00", "19：10", "19：20", "19：30", "19：40", "19：50", "20：00"],
          datasets: [
            {
              label: "CPU使用率",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
              label: "内存使用率",
              fillColor: "rgba(151,187,205,0.2)",
              strokeColor: "rgba(151,187,205,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [28, 48, 40, 19, 86, 27, 90]
            }, {
              label: "阈值 ",
              fillColor: "rgba(38,88,154,0.31)",
              strokeColor: "rgba(38,88,205,1)",
              pointColor: "rgba(38,88,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [90, 90, 90, 90, 90, 90, 90]
            }]
        }
      })



      var ele = document.getElementById("bar");
      var graph = new Chart(ele, {
        type: 'bar',
        data: {
          labels: ["19：00", "19：10", "19：20", "19：30", "19：40", "19：50", "20：00"],
          datasets: [
            {
              label: "单个任务用时",
              fillColor: "rgba(220,220,220,0.5)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
              label: "任务阈值 ",
              fillColor: "rgba(20,187,205,0.5)",
              strokeColor: "rgba(151,187,205,0.8)",
              highlightFill: "rgba(151,187,205,0.75)",
              highlightStroke: "rgba(151,187,205,1)",
              data: [90, 90, 90, 90, 90, 90, 90]
            }],
        }
      })



      var ele = document.getElementById("taskCon");
      var graph = new Chart(ele, {
        type: 'line',
        data: {
          labels: ["19：00", "19：10", "19：20", "19：30", "19：40", "19：50", "20：00"],
          datasets: [
            {
              label: "任务1并发数",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
              label: "阈值 ",
              fillColor: "rgba(38,88,154,0.31)",
              strokeColor: "rgba(38,88,205,1)",
              pointColor: "rgba(38,88,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [90, 90, 90, 90, 90, 90, 90]
            }]
        }
      })


      var ele = document.getElementById("usage");
      var graph = new Chart(ele, {
        type: 'radar',
        data:
        {
          labels: ["19：00", "19：10", "19：20", "19：30", "19：40", "19：50", "20：00"],
          datasets: [
            {
              label: "资源利用率",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
              label: "阈值 ",
              backgroundColor: "rgba(3,88,106,0.3)",
              fillColor: "rgba(38,88,154,0.31)",
              strokeColor: "rgba(38,88,205,1)",
              pointColor: "rgba(38,88,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [90, 90, 90, 90, 90, 90, 90]
            }]
        }

      })



      var ele = document.getElementById("servicetime");
      var graph = new Chart(ele, {
        type: 'bar',
        data: {
          labels: ["19:00", "19：15", "19：30", "19：35",],
          datasets: [
            {
              label: "服务链用时",
              fillColor: "rgba(220,220,220,0.5)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(220,220,220,1)",
              data: [59, 80, 56, 40]
            },
            {
              label: "任务阈值 ",
              fillColor: "rgba(20,187,205,0.5)",
              strokeColor: "rgba(151,187,205,0.8)",
              highlightFill: "rgba(151,187,205,0.75)",
              highlightStroke: "rgba(151,187,205,1)",
              data: [90, 90, 90, 90]
            }],
        }
      })


      var ele = document.getElementById("single");
      var graph = new Chart(ele, {
        type: 'bar',
        data: {
          labels: ["service1", "service2", "service3", "service4",],
          datasets: [
            {
              label: "单个任务用时",
              fillColor: "rgba(220,220,220,0.5)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(220,220,220,1)",
              data: [59, 80, 56, 40]
            },
            {
              label: "任务阈值 ",
              fillColor: "rgba(20,187,205,0.5)",
              strokeColor: "rgba(151,187,205,0.8)",
              highlightFill: "rgba(151,187,205,0.75)",
              highlightStroke: "rgba(151,187,205,1)",
              data: [70, 90, 80, 90]
            }],
        }
      })










    })

  </script>


</body>

</html>